<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue生命周期函数</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 
        事件相关的内容
        1.获取event变量
        2.绑定多个函数的时候,不能写函数的引用了,要直接写函数()
        3.最重要的东西,vue事件绑定的修饰符,
            事件的冒泡性质,内部标签的点击事件会被冒泡到外层, .stop停止冒泡修饰符
            .self只点击内部内容,不会触发子元素里面的点击事件
            .prevent阻止默认行为
            .capture捕获模式,冒泡从内到位,捕获从外到内
            
     -->
    <style>
      .green {
        background-color: red;
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script>
      // vue的生命周期函数
      const app = Vue.createApp({
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          btn(event) {
            console.log(event.target);
            this.counter++;
          },
          btnDiv() {
            alert("div clicked");
          },
        },
        template: `
                <div>
                    
                    <div class="green" @click.self='btnDiv' >
                        {{counter}} 测试
                        <button @click.stop="btn">button</button>
                    </div>
                </div>
            `,
      });
      const vm = app.mount("#root");
    </script>
  </body>
</html>
